<template>
    <el-form :model="FormModel" class="operation-wrap">
        <div class="btn">
            <el-button v-if="permission" type="primary" size="default" @click="handleClick" v-hasPermi="permission">{{text}}</el-button>
            <el-button v-else type="primary" size="default" @click="handleClick">{{text}}</el-button>
        </div>
        <div class="sreach">
            <el-space wrap>
                <template v-for="(item, index) in searchList" :key="index">
                    <el-select style="width:200px" v-if="item.type === 'select'" v-model="FormModel[item.prop]" placeholder="Select">
                        <el-option
                        v-for="opt in item.options"
                        :key="opt.value"
                        :label="opt.label"
                        :value="opt.value"
                        />
                    </el-select>
                    <el-date-picker
                        v-else-if="item.type === 'date'"
                        style="width:200px"
                        v-model="modelValue"
                        type="date"
                        placeholder="Pick a day"
                    />
                    <el-input v-else style="width:200px">
                        <template #append>
                            <el-button :icon="Search"/>
                        </template>
                    </el-input>
                </template>
            </el-space>
        </div>
    </el-form>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import {reactive, ref, PropType} from 'vue'
import { searchObjectType, buttonObjectType } from './constant'
    const props = defineProps({
        buttonObject: {
            type: Object as PropType<buttonObjectType>,
            default: {
                text: '按钮',
                handleClick: () => {}
            }
        },
        searchList: {
            type: Array as PropType<searchObjectType[]>
        },
        model:Object,
        items:Object
    })
    let modelValue = ref('')
    let FormModel = reactive(props.model || {})
    let { text, handleClick, permission } = props.buttonObject
    // let { } = props.filterObject
</script>

<style lang="less" scoped>
@import url('../../assets/style/mixin.less');
    .operation-wrap {
        .flex-common();
        margin-top: 40px;
    }
    .sreach {
        .flex-common();
        
    }
</style>